<template>
	<view
		style="background-color:#F5F5F5;  width: 100%;
	display: flex;
	
	align-items: center;
	flex-direction: column;
	"
	>
		<view  class="conton">
			<view class="ordercode">
				<text style="font-size: 15px; font-weight:500;margin-left: 15px;">计划单号：{{ pled.orderCode }}</text>
				<view style="font-size: 15px; font-weight:500;margin-right: 15px;color: #042A58;">
						<text v-if="pled.isDetach == 1" style="color: #002CFF;">待接单</text>
						<text v-if="pled.isDetach == 2" style="color: #00A56C;">拆单中</text>
						<text v-if="pled.isDetach == 3" style="color: #FF5F2E;">已完成</text>
				</view>
			</view>
			<view class="address">
				<view class="addresscar">
					<view class="" style="width: 34px; height: 14px;">
						<image src="../../static/img/icon_dingwei.png" mode="" style="width: 14px; height: 14px; margin-left: 15px;"></image>
					</view>
					<view
						style=" margin-left: 5px;
				overflow:hidden;
					text-overflow:ellipsis;
					white-space:nowrap
				"
					>
						<text>装货地：{{ pled.sendAddress }}</text>
					</view>
				</view>
				<view class="addresscar">
					<view class="" style="width: 34px; height: 14px;">
						<image src="../../static/img/icon_zdz@2x.png" mode="" style="width: 18px; height: 9px; margin-left: 13px"></image>
					</view>
					<view
						style=" margin-left: 5px;
				 overflow:hidden;
				 	text-overflow:ellipsis;
				 	white-space:nowrap
				 "
					>
						<text>卸货地：{{ pled.receiveAddress }}</text>
					</view>
				</view>
			</view>

			<view class="number">
				<view class="numbers" style="height: 24px; width: 90px; margin-left: 15px;color: #042A58;">{{ pled.unitPrice }}元/{{ planadd[0].weightName }}</view>
				<view class="numbers" style="height: 24px; width: 40px;color: #042A58;">
					<text>{{ planadd[0].piece }}{{ planadd[0].weightName }}</text>
				</view>
			</view>
			<view style="width:345px;height:50px;background:rgba(250,250,250,1);border-radius:7px;font-size: 13px;margin-top: 5px;margin-left: 5px;">
				<view style="width: 100%; display: flex;align-items: center;justify-content: space-between;">
					<text style="color: #042A58;margin-left: 30rpx;margin-top: 10px;">已运{{pled.wayBillNum*planadd[0].piece}}{{planadd[0].weightName}}</text>
					<text style="color: #777777;margin-right: 10px;margin-top: 10px;">计划总量{{ planadd[0].piece*pled.orderNum}}{{ planadd[0].weightName }}</text>
				</view>
				<view style="width:325px;height:8px;background:rgba(215,219,229,1);border-radius:7px;margin-top: 8px;margin-left: 10px;">
					<view :style="'width:' + ((pled.wayBillNum *planadd[0].piece) / (planadd[0].piece*pled.orderNum)) * 100 + '%'" style="text-align: right;position: relative;" class="plac">
						<image src="../../static/img/pic_jindutiao.png" mode="" style="width: 14px;height: 14px;right: -4px;position: absolute;top: -3px;"></image>
					</view>
				</view>
			</view>
			<view class="money">
				<!-- @click="creatQrcode" @tap="creatQrcode" -->
				<view style="font-size:12px;font-weight:400;color:#FFFFFF; margin-left: 15px;display: flex;align-items: center;width:109px;height:40px;background:rgba(255,95,46,1);border-radius:8px;justify-content: center;" @tap="creatQrcode">
					<image src="../../static/img/icon_erweima.png" mode="" style="width: 14px;height: 14px;margin-right: 5px;display: flex;align-items: center;"></image>
					查看二维码
				</view>
				<text style="font-size:12px;font-weight:500; color:rgba(254,7,0,1); margin-right: 15px;">总运费：{{Math.ceil(((Math.ceil(pled.totalPrice / (94 / 100).toFixed(3) * 100)/100)*pled.orderNum).toFixed(3)* 100)/100}}</text>
			</view>
			<tki-qrcode cid="qrcode1" ref="qrcode" :val="val" :loadMake="loadMake" />
		</view>
		<view style="width: 100%;height: 47px;font-size: 30rpx;color: #000000;display: flex;align-items: center;justify-content: center;">
			<view style="width:135px;background-color: #D8D8D8;height:1px;"></view>
			<view style="margin-left: 15px;margin-right: 15px;">已拆订单</view>
			<view style="width:135px;background-color: #D8D8D8;height:1px;"></view>
		</view>
		<!-- 已拆订单 -->
		<view> 
			<view style="margin-top:10px ;" v-for="(v, i) in list" :key="i" @click="orderdetail(i)" :class="leng <= 4 ? 'contonts' : 'contont'">
				<view class="ordercode">
					<text style="font-size: 15px; font-weight:500;margin-left: 15px;">订单号：{{ v.orderCode }}</text>
					<view style="font-size: 15px; font-weight:500;margin-right: 15px;color: #042A58;display: flex;align-items: center;justify-content: center;">
						<text style="font-size: 13px;color: #777777;margin-right: 4px;">订单详情</text>
						<image src="../../static/img/icon_youjian_da.png" style="width: 7px;height: 14px;" mode=""></image>
					</view>
				</view>
				<view class="address">
					<view class="addresscar">
						<view class="" style="width: 34px; height: 14px;">
							<image src="../../static/img/icon_dingwei.png" mode="" style="width: 14px; height: 14px; margin-left: 15px;"></image>
						</view>
						<view
							style=" margin-left: 5px;
					overflow:hidden;
						text-overflow:ellipsis;
						white-space:nowrap
					"
						>
							<text>装货地：{{ v.sendAddress }}</text>
						</view>
					</view>
					<view class="addresscar">
						<view class="" style="width: 34px; height: 14px;">
							<image src="../../static/img/icon_zdz@2x.png" mode="" style="width: 18px; height: 9px; margin-left: 13px"></image>
						</view>
						<view
							style=" margin-left: 5px;
					 overflow:hidden;
					 	text-overflow:ellipsis;
					 	white-space:nowrap
					 "
						>
							<text>卸货地：{{ v.receiveAddress }}</text>
						</view>
					</view>
				</view>
				<view class="number">
					<view class="numbers" style="height: 24px; width: 90px; margin-left: 15px;color: #042A58;">{{ v.unitPrice }}元/{{ add[i].weightName }}</view>
					<view class="numbers" style="height: 24px; width: 53px;color: #042A58;">
						<!-- {{this.add[i].weight}}{{add[i].weightName}}	 -->
						<text>{{ add[i].piece }}{{ add[i].weightName }}</text>
					</view>
					<view class="numbers" style="height: 24px; width: 80px;color: #042A58;">承运人:{{ v.contactname }}</view>
				</view>
				<view class="money" style="height: 38px;border-top: 1px solid #F5F5F5;display: flex;align-items: center;">
					<view style="font-size:12px;font-weight:400;color:rgba(74,74,74,1); margin-left: 15px;">
						接单情况:
						<text v-if="v.driverstatus == 0">无状态</text>
						<text v-if="v.driverstatus == 1">未接单</text>
						<text v-if="v.driverstatus == 2">已接单</text>
						<text v-if="v.driverstatus == 3">已发车</text>
						<text v-if="v.driverstatus == 4">已完成</text>
						<text v-if="v.driverstatus == 5">已回单</text>
						<text v-if="v.driverstatus == 6">拒单</text>
						<text v-if="v.driverstatus == 7">已取消</text>
					</view>
					<text style="font-size:12px;font-weight:500; color:rgba(254,7,0,1); margin-right: 15px;">总运费:{{ (v.totalPrice / (94 / 100)) | addZero }}元</text>
				</view>
			</view>
		</view>
		<view class="mask" v-if="planer">
			<canvas style="width: 300px; height: 343px;" canvas-id="firstCanvas"></canvas>
			<view
				style="width: 300px;height: 56px;background-color: #FFFFFF;display: flex;align-items: center;justify-content: space-between;font-size: 16px;border-top: 1px solid  #F0F0F0;"
			>
				<text class="masks" style="border-right: 1px solid #F0F0F0; color: #9B9B9B;" @click="planer = false">关闭</text>
				<text class="masks" style="color: #042A58;" @click="Preservation">保存图片</text>
			</view>
		</view>
		<!-- <view class="loading">{{ loadingTxt }}</view> -->
	</view>
</template>
<script>
import uel from '../../cookie.js';
import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue';
import bus from '../../bus.js';
import {ajaxs} from '../../apis.js';
var page = 1;
var timer = null;
var that = this;
export default {
	components: {
		tkiQrcode
	},
	data() {
		return {
			// 二维码
			ifShow: false,
			val: '', // 要生成的二维码值
			size: 200, // 二维码大小
			unit: 'upx', // 单位

			icon: '', // 二维码图标
			iconsize: 40, // 二维码图标大小
			lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
			onval: false, // val值变化时自动重新生成二维码
			loadMake: true, // 组件加载完成后自动生成二维码
			src: '', // 二维码生成后的图片地址或base64
			// 二维码完
			plaing: 30,
			loadingTxt: '加载更多',
			list: [],
			add: [],
			num: [],
			account: '',
			Password: '',
			planer: false,
			pled: [],
			planadd: [],
			planorder:"",
		};
	},

	filters: {
		addZero(data) {
			return Math.ceil(data.toFixed(3) * 100) / 100;
		}
	},
	// 分享
	onShareAppMessage: function(options) {
		var that = this; // 设置菜单中的转发按钮触发转发事件时的转发内容
		var shareObj = {
			title: '优货达货主', // 默认是小程序的名称(可以写slogan等)
			path: '', // 默认是当前页面，必须是以‘/’开头的完整路径
			imageUrl: '../../static/img/fenxiang.png' //自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
		}; // 返回shareObj
		return shareObj;
	},
	onLoad(option) {
		uni.showLoading({
			title: '加载中！'
		});
		var that=this
			this.planorder=option	
		this.val='https://www.uhuoda.com/v2/'+this.planorder.id
	},
	onShow() {
		this.plans();
		this.getNews();
	},
	onPullDownRefresh() {
		this.plans();
		this.getNews();
	},
	methods: {
		// 订单详情
		orderdetail(i){
			uni.navigateTo({
				url:"../orderdetailed/orderdetailed?id="+this.list[i].id
			})
		},
		plans() {
			var that = this;
			var header;
			ajaxs({
			  url: "/v1/order/info/"+this.planorder.id,
				method: 'get',
				success(res) {
					uni.hideLoading();
					that.pled =res.data.message;
					that.planadd = that.planadd.concat(JSON.parse(res.data.message.goodsjson));
				}
			});
		},
		// 保存图片
		Preservation() {
			let that = this;
			uni.canvasToTempFilePath({
				x: 0,
				y: 0,
				width: 300,
				height: 343,
				destWidth: 300*uni.getSystemInfoSync().pixelRatio,
				destHeight: 343*uni.getSystemInfoSync().pixelRatio,
				fileType: 'png',
				canvasId: 'firstCanvas',
				success: res => {
					//返回文件路径
					that.imageUrl = res.tempFilePath;
					//保存图片到系统相册
					uni.saveImageToPhotosAlbum({
						filePath: res.tempFilePath,
						success: res => {
							uni.showToast({
								title: '保存成功'
							});
						},
						fail() {
							uni.showToast({
								icon: 'none',
								title: '保存二维码失败'
							});
						}
					});
				}
			});
		},
		// 二维码
		creatQrcode() {
			uni.showLoading({
				title: '二维码生成中！'
			});
			var that = this;
			this.planer = true;
			this.$refs.qrcode._makeCode();
			bus.$on('msg', val => {
				uni.hideLoading();
				var ctx = uni.createCanvasContext('firstCanvas');
				ctx.setFillStyle('#FFFFFF');
				ctx.fillRect(0, 0, 300, 343);
				ctx.drawImage(val, 62, 36, 175, 175);
				ctx.drawImage('../../static/img/icon_dingwei.png', 20, 234, 15, 15);
				ctx.drawImage('../../static/img/icon_zdz@2x.png', 20, 287, 18, 9);
				ctx.font = '14px 微软雅黑'; //文字样式
				ctx.fillStyle = '#000000';
				ctx.fillText('装货地：'+this.pled.sendAddress.substring(0,12), 42, 247);
				
				ctx.fillText(this.pled.sendAddress.substring(12), 98, 267);
				ctx.fillText('卸货地：'+this.pled.receiveAddress.substring(0,12), 42, 297);
				ctx.fillText(this.pled.receiveAddress.substring(12), 98, 317);
				ctx.stroke();
				ctx.fill();
				ctx.draw();
			});
		},
		getNews() {
			var that = this;
			var header;
			uni.showNavigationBarLoading();
			ajaxs({
				url: '/v1/order/total/waybill/list',
				method: 'post',
				data: { offset: page, limit: 10 ,id:that.planorder.id},
				success(res) {
					that.list = res.data.list;
					res.data.list.forEach(function(v, i) {
						that.add = that.add.concat(JSON.parse(v.goodsjson));
					});
					uni.stopPullDownRefresh();
					uni.hideNavigationBarLoading();
					page++;
					//请求成功的处理
				}
			});
		}
	}
};
</script>

<style>
.plac {
	background: linear-gradient(90deg, rgba(53, 132, 196, 1) 0%, rgba(4, 42, 88, 1) 100%);
	height: 8px;
	border-radius: 7px;
}
.plan {
	color: #000000;
}
.plans {
	color: #9b9b9b;
}
.loading {
	line-height: 2em;
	text-align: center;
	color: #888;
	margin-top: 30px;
}
.contont {
	width: 355px;
	height: 168px;
	background: rgba(255, 255, 255, 1);
	border-radius: 8px;
}
.conton {
	width: 355px;
	height: 226px;
	background: rgba(255, 255, 255, 1);
	border-radius: 8px;
	margin-top: 10px;
}
.ordercode {
	height: 45px;
	display: flex;
	border-bottom: 1px solid #f5f5f5;
	justify-content: space-between;
	align-items: center;
	box-sizing: border-box;
}
.address {
	height: 52px;
	display: flex;
	flex-direction: column;
	font-size: 12px;
	font-weight: 400;
}
.addresscar {
	margin-top: 6px;
	display: flex;
	align-items: center;
}
.number {
	display: flex;
}
.numbers {
	background: rgba(242, 243, 246, 1);
	border-radius: 4px;
	display: flex;
	justify-content: space-around;
	align-items: center;
	font-size: 12px;
	margin-left: 5px;
}
.money {
	margin-top: 10px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.contonts {
	width: 355px;
	height: 663px;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.mask {
	width: 100%;
	height: 100%;
	position: fixed;
	background: rgba(0, 0, 0, 0.4);
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
}
.masks {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}
</style>
